<template>
  <view class="sj-box">
    <view class="sj-title">
      <LabelTitle
        text="安全事件概况"
        :showImg="true"
        class="title-word"
      ></LabelTitle>
      <uni-data-select
        v-model="selector"
        :localdata="timeRange"
        @change="handlePickerChange"
        class="title-select"
      ></uni-data-select>
    </view>
    <view class="chart" :style="{ height: chartContainerHeight }">
      <view class="chart-left">
        <text class="num">{{ dataResponse.eventCnt || 0 }}</text>
        <text class="word">事件总数</text>
      </view>
      <view class="line"></view>
      <!-- 环形统计图表 -->
      <EchartsComponent :chartData="transformedChartData" ref="echartsRef" />
    </view>
    <view class="data-table">
      <view class="item">
        <text class="item-title">{{ taskStatData.pendingTasks || 0 }}</text>
        <text>待处置任务</text>
      </view>
      <view class="line"></view>
      <view class="item">
        <text class="item-title">{{
          taskStatData.pendingAssignInspect || 0
        }}</text>
        <text>得分派送任务</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, computed, watch } from 'vue';
import LabelTitle from '@/components/labeltitle.vue';
import EchartsComponent from '@/components/echarts.vue';
import api from '@/api/modules/event';

// 定义下拉框选项
const timeRange = [
  { value: 7, text: '近7天' },
  { value: 30, text: '近30天' },
];

// 定义下拉框的 v-model 绑定值，默认选中第一个选项（value: 7）
// 明确指定为number类型
const selector = ref<number>(7);

// 定义接口返回的数据状态
const dataResponse = ref<{
  eventCnt: number;
  eventTypeCntList: {
    eventType: string;
    count: number;
  }[];
}>({
  eventCnt: 0,
  eventTypeCntList: [],
});

const taskStatData = ref<{
  pendingTasks: number;
  pendingInspect: number;
  pendingAssignInspect: number;
}>({
  pendingTasks: 0,
  pendingInspect: 0,
  pendingAssignInspect: 0,
});

// 转换 eventTypeCntList 为 qiun-data-charts 所需的格式
const transformedChartData = computed(() => {
  if (!dataResponse.value.eventTypeCntList) {
    return {
      series: [
        {
          data: [],
        },
      ],
    };
  }
  const transformedData: RingDataItem[] =
    dataResponse.value.eventTypeCntList.map((item) => ({
      name: item.eventType,
      value: item.count,
    }));
  return {
    series: [
      {
        data: transformedData,
      },
    ],
  };
});
// 获取 EchartsComponent 的 ref
const echartsRef = ref();
// 计算图表容器的高度
const chartContainerHeight = computed(() => {
  if (transformedChartData.value.series[0].data.length > 0) {
    return `${200 + transformedChartData.value.series[0].data.length * 40}rpx`; // 根据数据项数量调整高度
  } else {
    return '340rpx'; // 数据为空时设置默认高度
  }
});

// 调用事件类型分析接口
async function fetchData(dateRange: number) {
  try {
    const params = {
      dateRange,
    };
    const res = await api.getDataTotalList(params);
    dataResponse.value = {
      eventTypeCntList: res.data.eventTypeCntList,
      eventCnt: res.data.eventCnt,
    };
  } catch (error) {
    console.error('获取事件类型分析数据失败:', error);
  }
}

// 调用任务状态统计接口
async function fetchTaskStatData(dateRange: number) {
  try {
    let data = {};
    const result = await api.gettaskstatData(data);

    taskStatData.value = result.data;
  } catch (error) {
    console.error('获取任务状态统计数据失败:', error);
  }
}

// 处理下拉框选中值变化
const handlePickerChange = (event: any) => {
  if (event === null || event === undefined || event === '') {
    // 如果选择的是“清空”，重置为默认值 7
    selector.value = 7;
  } else {
    selector.value = event;
  }
  fetchData(selector.value);
  fetchTaskStatData(selector.value); // 同时更新任务状态数据
};

// 页面加载时调用接口
onLoad(async () => {
  fetchData(selector.value); // 使用默认值调用事件类型分析接口
  fetchTaskStatData(selector.value); // 使用默认值调用任务状态统计接口
});
</script>

<style lang="scss" scoped>
.sj-box {
  padding: 0 28.5rpx;
  font-size: 23rpx;
  min-height: 600rpx; /* 设置最小高度 */
  display: flex;
  flex-direction: column;
}

.sj-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  .title-word {
    display: flex;
    align-items: center;
    font-size: 32rpx;
  }

  .title-select {
    width: 170rpx;
    font-size: 28rpx;
    // 使用深度选择器覆盖子组件样式
    :deep(.uni-select) {
      border: none; // 修改边框颜色
    }

    :deep(.uni-select__dropdown-item) {
      background-color: #ffffff; // 修改下拉项背景颜色
      color: #333333; // 修改下拉项字体颜色
    }

    :deep(.uni-select__input-box) {
      width: 100%;
    }
  }
}

.chart {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 使伪元素相对于 .chart 定位 */
  background: #ffffff;
  box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
  border-radius: 15rpx;
  /* 动态背景图 */
  &::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 2%;
    width: 96%;
    height: 94%;
    background-image: url('@/static/images/blueBg.png');
    background-size: cover; /* 背景图自适应容器大小 */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10rpx; /* 圆角，稍微小于 .chart 容器的圆角 */
    pointer-events: none; /* 确保伪元素不影响交互 */
  }
  .line {
    flex: 1;
    width: 1rpx;
    height: 169rpx;
    border: 1rpx solid #e1e3e7;
    margin: 0rpx 38rpx;
  }
}

.chart-left {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  margin-left: 57.69rpx;

  .num {
    font-family: YouSheBiaoTiHei;
    font-size: 46rpx;
    color: #2266bf;
    line-height: 42rpx;
    font-style: normal;
  }

  .word {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 23rpx;
    color: #999999;
    line-height: 33rpx;
    font-style: normal;
    margin-top: 28.85rpx;
  }
}

.data-table {
  height: 173rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
  border-radius: 15rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  position: relative; /* 使伪元素相对于 .data-table 定位 */
  &::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 2%;
    width: 96%;
    height: 90%;
    background-image: url('@/static/images/redBg.png');
    background-size: cover; /* 背景图自适应容器大小 */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10rpx; /* 圆角，稍微小于 .chart 容器的圆角 */
    pointer-events: none; /* 确保伪元素不影响交互 */
  }
  .item {
    width: 100%;
    // flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    margin-bottom: 10rpx;

    text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 23rpx;
      color: #999999;
      line-height: 33rpx;
      text-align: right;
      font-style: normal;
    }

    .item-title {
      font-family: YouSheBiaoTiHei;
      font-size: 46rpx;
      color: #bf6c22;
      line-height: 60rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .line {
    flex: 1;
    width: 1rpx;
    height: 104rpx;
    border: 1rpx solid #e1e3e7;
  }
}
</style>
